<template>
  <div style="width: 100%; height: 100%">
    <Header title="数据分析进度" />
    <div style="width: 100%; height: calc(100% - 70px); display: flex">
      <div id="chart1" style="width: 33.3%; height: 100%" />
      <div id="chart2" style="width: 33.3%; height: 100%" />
      <div id="chart3" style="width: 33.3%; height: 100%" />
    </div>
  </div>
</template>
<script>
import { fontSize } from '@/utils'
import Header from './header.vue'
import echarts from 'echarts'
import { analyseProgress } from '@/api/cms/index/index.js'
export default {
  components: {
    Header
  },
  props: {
    deptCode: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: {}
    }
  },
  watch: {
    railTypes() {
      this.init()
    }
  },
  mounted() {
    this.init()
    const that = this
    window.addEventListener('resize', function() {
      that.$nextTick((_) => {
        const myChart1 = echarts.init(document.getElementById('chart1'))
        const myChart2 = echarts.init(document.getElementById('chart2'))
        const myChart3 = echarts.init(document.getElementById('chart3'))
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()
      })
    })
  },
  methods: {
    init() {
      // analyseProgress({ deptCode: this.deptCode, railType: this.railTypes }).then((res) => {
      //   this.data = res.data
      //   this.showEcharts()
      // })
      this.showEcharts()
    },
    showEcharts() {
      const that = this
      const myChart1 = echarts.init(document.getElementById('chart1'))
      const myChart2 = echarts.init(document.getElementById('chart2'))
      const myChart3 = echarts.init(document.getElementById('chart3'))
      const option1 = {
        title: {
          text: '96.54%',
          // triggerEvent: true,
          textStyle: {
            color: '#66FFFF',
            fontSize: fontSize(0.3)
          },

          subtext: '2C',
          subtextStyle: {
            color: '#fff',
            fontSize: fontSize(0.18)
          },

          itemGap: fontSize(0.6),
          left: 'center',
          top: '30%'
        },
        tooltip: {
          formatter: function(params) { }
        },
        angleAxis: {
          max: 100,
          clockwise: false, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          radius: '150%',
          center: ['50%', '40%']
        },
        series: [
          {
            stack: '测试',
            type: 'bar',
            data: [96.54],
            showBackground: true,
            backgroundStyle: {
              color: '#EFF2F5'
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            silent: true,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(71, 228, 229, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(43, 142, 243, 1)'
                  }
                ]),
                borderWidth: 3
              }
            }
          },
          {
            stack: '测试',
            type: 'bar',
            data: [0.01],
            showBackground: true,
            backgroundStyle: {
              color: '#122D53',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 14,
            itemStyle: {
              color: '#90BDFF',
              borderColor: 'rgba(81,143,239, 1)',
              borderWidth: 3
            }
          }
        ]
      }
      const option2 = {
        title: {
          text: '87.36%',
          // triggerEvent: true,
          textStyle: {
            color: '#66FFFF',
            fontSize: fontSize(0.3)
          },

          subtext: '3C',
          subtextStyle: {
            color: '#fff',
            fontSize: fontSize(0.18)
          },

          itemGap: fontSize(0.6),
          left: 'center',
          top: '30%'
        },
        tooltip: {
          formatter: function(params) { }
        },
        angleAxis: {
          max: 100,
          clockwise: false, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          radius: '150%',
          center: ['50%', '40%']
        },
        series: [
          {
            stack: '测试',
            type: 'bar',
            data: [87.36],
            showBackground: true,
            backgroundStyle: {
              color: '#EFF2F5'
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            silent: true,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(71, 228, 229, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(43, 142, 243, 1)'
                  }
                ]),
                borderWidth: 3
              }
            }
          },
          {
            stack: '测试',
            type: 'bar',
            data: [0.01],
            showBackground: true,
            backgroundStyle: {
              color: '#122D53',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 14,
            itemStyle: {
              color: '#90BDFF',
              borderColor: 'rgba(81,143,239, 1)',
              borderWidth: 3
            }
          }
        ]
      }
      const option3 = {
        title: {
          text: '83.21%',
          // triggerEvent: true,
          textStyle: {
            color: '#66FFFF',
            fontSize: fontSize(0.3)
          },

          subtext: '4C',
          subtextStyle: {
            color: '#fff',
            fontSize: fontSize(0.18)
          },

          itemGap: fontSize(0.6),
          left: 'center',
          top: '30%'
        },
        tooltip: {
          formatter: function(params) { }
        },
        angleAxis: {
          max: 100,
          clockwise: false, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          radius: '150%',
          center: ['50%', '40%']
        },
        series: [
          {
            stack: '测试',
            type: 'bar',
            data: [83.21],
            showBackground: true,
            backgroundStyle: {
              color: '#EFF2F5'
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            silent: true,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(71, 228, 229, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(43, 142, 243, 1)'
                  }
                ]),
                borderWidth: 3
              }
            }
          },
          {
            stack: '测试',
            type: 'bar',
            data: [0.01],
            showBackground: true,
            backgroundStyle: {
              color: '#122D53',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 14,
            itemStyle: {
              color: '#90BDFF',
              cursor: 'default',
              borderColor: 'rgba(81,143,239, 1)',
              borderWidth: 3
            }
          }
        ]
      }

      myChart1.setOption(option1)
      myChart2.setOption(option2)
      myChart3.setOption(option3)

      // myChart1.on('click', function(params) {
      //   console.log(params)
      //   that.$emit('module1Click', { moduleType: 'module6', title: '分析进度详情', CType: '2C' })
      // })
      // myChart2.on('click', function(params) {
      //   console.log(params)
      //   that.$emit('module1Click', { moduleType: 'module6', title: '分析进度详情', CType: '3C' })
      // })
      // myChart3.on('click', function(params) {
      //   console.log(params)
      //   that.$emit('module1Click', { moduleType: 'module6', title: '分析进度详情', CType: '4C' })
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
  .num {
    font-family: YouSheBiaoTiHei;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    color: #3e9cff;
  }
  .name {
    font-family: YouSheBiaoTiHei;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 23px;
  }
</style>
